<template>
  <div class="header">
    <h3>设备二维码</h3>
  </div>
  <div class="qr-code-container">
    <img :src="qrCodeData?.qrcode" alt="设备二维码" />
    <p style="margin-top: 10px; color: #666">设备二维码</p>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { DeviceApi } from '@/api/mqtt/device'
import { ConfigApi } from '@/api/mqtt/config'
// 监听 props.device 的变化
const props = defineProps({
  device: Object
})
watch(
  () => props.device,
  async (newVal, oldVal) => {
    if (newVal) {
      console.log('newVal.id', newVal.id)
      showQRCode(newVal.id)
    }
  }
)

/** IoT 设备 表单 */
defineOptions({ name: 'DeviceInfoQr' })

const message = useMessage() // 消息弹窗

const mqttConfigList = ref<any[]>([]) // mqtt配置列表

// 二维码相关
const qrCodeData = ref<{ deviceKey: string; qrcode: string } | null>(null)

// 显示设备二维码
const showQRCode = async (id) => {
  if (!id) {
    message.warning('请先保存设备信息')
    return
  }

  try {
    const response = await DeviceApi.getDeviceQRCodeBase64(id)
    qrCodeData.value = response
    message.success('二维码加载成功')
  } catch (error) {}
}

onMounted(async () => {
  console.log('newVal.id', props.device?.id)
  showQRCode(props.device?.id)
})
</script>
